<template>
  <div class="q-pa-md q-gutter-sm">
    <t-banner class="bg-primary text-white">
      Unfortunately, the credit card did not go through, please try again.
      <template v-slot:action>
        <t-btn flat color="white" label="Dismiss" />
        <t-btn flat color="white" label="Update Credit Card" />
      </template>
    </t-banner>

    <t-banner :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-3'">
      <template v-slot:avatar>
        <t-icon name="signal_wifi_off" color="primary" />
      </template>
      You have lost connection to the internet. This app is offline.
      <template v-slot:action>
        <t-btn flat color="primary" label="Turn on Wifi" />
      </template>
    </t-banner>

    <t-banner inline-actions class="text-white bg-red">
      You have lost connection to the internet. This app is offline.
      <template v-slot:action>
        <t-btn flat color="white" label="Turn ON Wifi" />
      </template>
    </t-banner>
  </div>
</template>
